<template>
  <div class="popup">
    <form action="/">
      <van-search
        v-model="iptValue"
        show-action
        :placeholder="placeholder"
        @search="onSearch"
        @input="onInput"
      >
        <template #action>
          <div @click="onCancel">取消</div>
        </template>
      </van-search>

      <HistoryHot
        v-if="blockShow == 1"
        :historyKeywordList="historyKeywordList"
        :hotKeywordList="hotKeywordList"
        @goToSearch="goToSearch"
      />
      <List
        v-else-if="blockShow == 2"
        :listArr="listArr"
        @goToSearch="goToSearch"
      />
      <Product
        v-else
        :goodsList="goodsList"
        :filterCategory="filterCategory"
        @categoryChange="categoryChange"
        @priceChange="priceChange"
      />
    </form>
  </div>
</template>
 
<script>
import HistoryHot from "./HistoryHot";
import List from "./List";
import Product from "./Product";
import {
  GetHistoryHotApi,
  GoSearchApi,
  SearchProductsApi,
} from "../../request/api";
export default {
  data() {
    return {
      iptValue: "",
      // 区块显示（1代表HistoryHot，2代表List，其他代表Product
      blockShow: 1,
      placeholder: "请输入搜索关键词",
      // 历史数组
      historyKeywordList: [],
      // 热门数组
      hotKeywordList: [],
      // 列表数组
      listArr: [],
      // 产品区块的数组
      goodsList: [],
      // 分类的数组
      filterCategory: [],
      // 页数
      page: 1,
      // 每页个数
      size: 20,
      // 排列顺序
      order: "desc",
      // 分类选项的id
      categoryId: 0,
      // 根据什么来排序（id）
      sort: "id",
    };
  },
  components: {
    HistoryHot,
    List,
    Product,
  },
  created() {
    setTimeout(() => {
      GetHistoryHotApi().then((res) => {
        console.log(res);
        if (res.errno == 0) {
          let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;
          this.placeholder = defaultKeyword.keyword;
          this.historyKeywordList = historyKeywordList;
          this.hotKeywordList = hotKeywordList;
        }
      });
    }, 500);
  },
  methods: {
    categoryChange(id) {
      this.categoryId = id;
      this.onSearch();
    },
    priceChange(order) {
      this.order = order;
      this.sort = "price";
      this.onSearch();
    },
    // 搜索事件
    onSearch() {
      // 执行搜索
      SearchProductsApi({
        keyword: this.iptValue,
        page: this.page,
        size: this.size,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort,
      }).then((res) => {
        console.log(res);
        // 跳转到产品区块
        if (res.errno == 0) {
          this.blockShow = 3;
          // let { goodsList } = res.data;
          this.goodsList = res.data.goodsList;
          this.filterCategory = res.data.filterCategory;
          this.filterCategory = JSON.parse(
            JSON.stringify(this.filterCategory)
              .replace(/id/g, "value")
              .replace(/name/g, "text")
          );
        }
      });
    },
    // 取消事件
    onCancel() {
      this.$router.back();
    },
    onInput() {
      this.blockShow = 2;
      GoSearchApi({
        keyword: this.iptValue,
      }).then((res) => {
        if (res.errno == 0) {
          this.listArr = res.data;
        }
      });
    },
    goToSearch(arg) {
      // console.log(arg);
      this.iptValue = arg;
      this.onSearch();
    },
  },
};
</script>
 
<style lang = "less" scoped>
.popup {
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 100%;
  background-color: #efefef;
  z-index: 999;
}
</style>